<template>
  <div class="rankinglist">
		<div class="rankinglist-item">
			<h1 style="margin-bottom: 15px;">官方版</h1>
			<div class="rankinglist-item-main" v-for="(item,index) in arr" :key="index">
				<div class="rankinglist-item-main-left">
					<img v-lazy="item.coverImgUrl" />
				</div>
				<div class="rankinglist-item-main-rigth">
					<div class="table">
					<table border="0" style="width: 100%;border-collapse:collapse">
					  <tr :class="{'table-content-tr':true,'back':(indexs % 2) == 0}" v-for="(items,indexs) in item.datalist" :key="indexs" @click="clicktr(items)">
					    <td style="width: 30px;color: red;">{{indexs + 1}}</td>
					    <td style="padding-left: 20px;width: 100%;">{{items.name}}</td>
						<td style="display: flex;justify-content:center;color: #999999;padding-right: 10px;">{{items.ar[0].name}}</td>
					  </tr>
					</table>
					</div>
					<p @click="playlistDetail(item.id)">查看全部 ></p>
				</div>
			</div>
		</div>
		<h1 style="padding-left: 15px;">全球榜</h1>
		<div class="rankinglist-items">
			<div class="rankinglist-item-img" v-for="(item,index) in arrlist" :key="index">
				<img v-lazy="item.coverImgUrl" @click="playlistDetail(item.id)"/>
				<p>{{item.name}}</p>
				<span style="position: absolute;top: 2px;right: 5px;min-width: 20px;color: #FFFFFF;"><i style="font-size: 12px;font-weight: bold;" class="iconfont icon-play"></i> {{item.playCount | playCountw}}</span>
			</div>
		</div>
  </div>
</template>
<script>
export default{
  data () {
    return {
		tablelist:[1,1,1,1,1],
		list:[],
		arrlist: [],
		arr: []
    }
  },
  components: {

  },
  methods: {
  	toplist(){
		this.$api.toplist().then(res=>{
		  let arr = [];
		  let arrlist = res.list.filter((value,index)=>{
				if(value.name === '飙升榜' || value.name === '新歌榜' || value.name === '原创榜' ||  value.name === '热歌榜' || value.name === '歌手榜'){
				   arr.push(value);
				}else{
				   return value;
				}
			})
			 arr.map(async (item,index)=>{
			 				await this.$api.playlist_detail({id:item.id}).then(res=>{
								this.$set(arr[index], 'datalist', res.playlist.tracks.slice(0,5))  // === this.arr[index] = newValue
			 				})
			 			})
						console.log(arr)
						this.arr = arr;
			this.arrlist = arrlist;
			
			console.log(this.arrlist,this.arr)
		})
	},
	playlistDetail(id) {                  //获取歌单详情
		this.$api.playlist_detail({
			id: id
		}).then(res => {
			this.$router.push({path:'/songsheet',query:{data:res}})
		})
	},
	clicktr(data) { //点击当前歌曲
		let id = data.id;
		this.$api.song_url({
			id: id
		}).then(res => {
			let obj = {
				img:data.al.picUrl,
				name:data.name,
				gs:data.ar[0].name,
				zsc:data.dt,
				url:res.data[0].url
			}
			console.log(data)
			console.log(res)
			this.$store.commit('SongSET', obj);
		})
	}
  },
  created() {
  	this.toplist();
  },
  filters: {
  	playCountw(e) {
  		return Math.ceil(e / 10000) + '万';
  	}
  }
}
</script>

<style scoped="scoped">
	.rankinglist{
		width: 100%;
		
	}
	.rankinglist-item{
		padding: 15px;
		width: 100%;
	}
	.rankinglist-item-main{
		display: flex;
		justify-content: space-between;
		margin-bottom: 20px;
	}
	.rankinglist-item-main-left{
		width: 200px;
		height: 200px;
		margin-right: 30px;
	}
	.rankinglist-item-main-left img{
		width: 200px;
		height: 200px;
		border-radius: 20px;
	}
	.rankinglist-item-main-rigth{
		width: 100%;
	}
	.rankinglist-item-main-rigth p{
		padding: 7px 0;
		color: #999999;
		font-size: 12px;
		cursor: pointer;
	}
	.rankinglist-item-main-rigth p:hover{
		color: #000000;
	}
	.rankinglist-items{
		display: flex;
		flex-wrap: wrap;
	}
	.rankinglist-item-img{
		cursor: pointer;
		position: relative;
		width: 180px;
		margin: 15px;
	}
	.rankinglist-item-img img{
		width: 180px;
		height: 180px;
		border-radius: 10px;
	}
	.rankinglist-item-img p{
		padding: 3px 2px;
	}
	.table{
		width: 100%;
		font-size: 13px;
	}
	.table label{
		display: flex;
		justify-content: end;
	}
	.table table th{
		color: #999999;
		padding: 10px 0;
		margin: 0;
	}
	.table table td{
		color: #000000;
		padding: 8px 0;
		overflow:hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow:ellipsis;
	}
	.table table .table-content-tr{
		cursor: pointer;
		padding: 10px 0;
	}
	.back{
		background-color: #E9E9E9;
	}
	.table table .table-content-tr:hover{
		background-color: #D9D9D9;
	}
</style>
